<template>
  <header>
    <h1>Echarts图表库</h1>
  </header>
  <main>
    <div class="screening">
      <h2>图表类目</h2>
      <div
        class="screening-item"
        v-for="item in queryList"
        :key="item.id"
        :class="{ active: activeIndex == item.id }"
        @click="handleScreen(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="content">
      <RouterView />
    </div>
  </main>
</template>
<script setup>
import { RouterView } from 'vue-router'
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const data = reactive({
  queryList: [
    { id: 1, label: '折线图', value: 'line' },
    { id: 2, label: '水波图', value: 'water' },
    { id: 3, label: '饼图', value: 'pie' },
    { id: 4, label: '柱状图', value: 'bar' },
    { id: 5, label: '词云图', value: 'wordCloud' },
    { id: 6, label: '雷达图', value: 'radar' },
    { id: 7, label: '仪表盘', value: 'gauge' },
    { id: 8, label: 'Vue组件', value: 'vue-component' },
  ],
  activeIndex: 1,
})

const handleScreen = (item) => {
  data.activeIndex = item.id
  router.push({
    path: `/${item.value}`,
  })
}


const { queryList, activeIndex } = toRefs(data)
</script>

<style scoped lang="less">
header {
  background-color: #6294f8;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  padding-left: 40px;
  height: 84px;
  line-height: 84px;
}
main {
  padding: 16px 40px;
  background-color: #f0f7ff;
  font-size: 14px;
  height: calc(100vh - 84px);
  overflow: auto;
}

.screening {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  background-color: #fff;
  padding-left: 20px;
  .screening-item {
    cursor: pointer;
    color: #69748b;
    padding: 6px 12px;
  }
  .screening-item.active {
    background-color: #1890ff;
    color: #fff;
    border-radius: 4px;
  }
}
</style>
